﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Wang weilun personal official website</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
  </head>
  <body>
    <aside>
      <a class="cur_a"><span>首页</span></a>
      <a><span>关于我</span></a>
      <a><span>技能</span></a>
      <a><span>经验</span></a>
      <a><span>联系我</span></a>
    </aside>
    <section class="page_one" id="page1">
      <nav>
        <div class="nav_wrap">
          <div class="resume_logo">
            <a href="index.html">Wang weilun</a>
          </div>
          <div class="nav_bar">
            <ul class="nav_bar_ul">
              <li><a href="index.html">首页</a></li>
              <li><a href="#">关于我</a></li>
              <li><a href="#">技能</a></li>
              <li><a href="#">工作经验</a></li>
              <li><a href="#">联系我</a></li>
            </ul>
          </div>
        </div>
      </nav>

      <div class="cen_con">
        <div class="portrait">
          <img onmousemove="this.src='images/22.png'"/
          onmouseout="this.src='images/portrait1.jpg'"/
          src="images/portrait1.jpg">
        </div>
        <div class="cen_text">
          <h2>世上只有想不通的人，没有走不通的路。</h2>
          <hr />
          <h3>王伟伦</h3>
          <h3>Web前端工程师</h3>
          <h3>杭州 / 武汉</h3>
          <!-- <h3>10</h3> -->
        </div>
      </div>
      <div class="down_arrow">
        <a class="scroll"><span></span></a>
      </div>
    </section>

    <section class="page_two" id="page2">
      <div class="con_wrap">
        <div class="tit_wrap">
          <h1>关于我</h1>
          <div class="scissors">
            <span></span>
          </div>
          <h2>
            如果debugging是一种消灭bug的过程,那编程就一定是把bug放进去的过程。
          </h2>
        </div>
        <div class="myinfo">
          <table>
            <tbody>
              <tr>
                <td rowspan="6">
                  <img src="images/portrait1.jpg" />
                </td>
                <td>姓名 | 王伟伦</td>
                <td>手机 | 13093291267</td>
              </tr>
              <tr>
                <td>性别 | 男</td>
                <td>邮箱 | 13093291267@163.com</td>
              </tr>
              <tr>
                <td>出生 | 1999.05.12</td>

                <td>QQ号 | 2967796480</td>
              </tr>
              <tr>
                <td>居住 | 浙江省杭州市</td>
                <td>户籍 | 湖北省潜江市</td>
              </tr>
              <tr>
                <td>学历 | 大专</td>
                <td>学校 | 湖北生物科技职业学院</td>
              </tr>
              <tr>
                <td>专业 | 计算机应用技术</td>
                <td>证书 | 计算机四级证书</td>
              </tr>
              <tr>
                <td colspan="3">
                  <p>项目：</p>
                  <br />
                  <a href="http://www.1-yd.com/">1. 恒蓝云在线平台</a><br />
                  <a>2. 恒蓝云微信小程序</a><br /><br />
                  <!-- <p>小作品 （查看网址：XXX）</p> -->
                  <br />
                  <!-- <a href="XXX">1. 手工皂（注：瀑布流本地没问题） </a>
                  <a href="XXX">2. 个人主页 </a>
                  <a href="XXX">3. 手工皂 </a><br /> -->
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="down_arrow">
        <a class="scroll"><span></span></a>
      </div>
    </section>
    <section class="page_three" id="page3">
      <div class="con_wrap">
        <div class="tit_wrap">
          <h1>技能</h1>
          <div class="scissors">
            <span></span>
          </div>
          <h2>代码，我们眼中的世界，别人眼中的天书。</h2>
        </div>
        <div class="skill_con">
          <div class="canvas_wrap">
            <div class="canvas_con">
              <div class="text_con">
                <p class="percent">90%</p>
                <p class="chart_title">HTML5</p>
              </div>
              <canvas id="html5" width="160" height="160"></canvas>
            </div>
            <div class="canvas_con">
              <div class="text_con">
                <p class="percent">90%</p>
                <p class="chart_title">CSS3</p>
              </div>
              <canvas id="css3" width="160" height="160"></canvas>
            </div>
            <div class="canvas_con">
              <div class="text_con">
                <p class="percent">75%</p>
                <p class="chart_title">JS</p>
              </div>
              <canvas id="js" width="160" height="160"></canvas>
            </div>
            <div class="canvas_con">
              <div class="text_con">
                <p class="percent">80%</p>
                <p class="chart_title">Vue</p>
              </div>
              <canvas id="jq" width="160" height="160"></canvas>
            </div>
            <div class="canvas_con">
              <div class="text_con">
                <p class="percent">70%</p>
                <p class="chart_title">React</p>
              </div>
              <canvas id="bs" width="160" height="160"></canvas>
            </div>
            <div class="canvas_con">
              <div class="text_con">
                <p class="percent">80%</p>
                <p class="chart_title">Uni/Taro</p>
              </div>
              <canvas id="ps" width="160" height="160"></canvas>
            </div>
          </div>
          <div class="text_wrap">
            <p>
              1. 熟练HTML5，CSS3，JavaScript技术，开发符合W3C标准的前端网页。
            </p>
            <p>2. 熟练使用jQuery，bootstrap等前端框架技术。</p>
            <p>3. 熟悉sass工具，扩展css功能,提高css功能和效率。</p>
            <p>4. 熟悉Ajax的运行机制，能使用ajax进行数据交互。</p>
            <p>
              5.
              熟练使用Vue2/3框架，能根据需求搭配各类插件和组件进行开发和配置。
            </p>
            <p>
              6.
              熟练使用React框架、Jsx语法、，能结合TypeScript封装不同类型的公共组件。
            </p>
            <p>
              7.
              熟练使用Uni-app/Taro多端开发框架进行开发，以及钉钉原生小程序、微信原生小程序。
            </p>
            <p>
              8. 熟悉W3C标准，对表现与数据分离、Web语义化等有较为深刻的理解。
            </p>
            <p>9. 精通流体布局和弹性布局，能适应各种分辨率。</p>
            <p>
              10.
              熟悉各种主流浏览器的差异性，有解决主流浏览器的兼容性问题的经验。
            </p>
          </div>
        </div>
      </div>
      <div class="down_arrow">
        <a class="scroll"><span></span></a>
      </div>
    </section>
    <section class="page_four" id="page4">
      <div class="con_wrap">
        <div class="tit_wrap">
          <h1>工作经验</h1>
          <div class="scissors">
            <span></span>
          </div>
          <h2>我现在做的一切仅仅是为了不让未来的自己后悔。</h2>
        </div>
        <div class="work_con">
          <div class="programe">
            <div class="work_time">4个月<br />恒蓝云在线平台Web端</div>
            <div class="work_text">
              <div class="triangle-left"></div>
              <div class="exCon">
                <h4>开发时间：2023/7 -- 2023/11</h4>
                <h5>开发工具：Visual Studio Code</h5>
                <p>项目描述：</p>
                <p>
                  该项目是关于水质监测行业使用的设备在线管理和数据监测网站。主要有：设备管理模块、报警管理模块、数据概览模块、参数概览模块、参数历史数据模块、坐标管理模块、监控管理模块、个人设置模块、数据采集模块、实时数据模块、设备日志模块等
                </p>
                <p>
                  恒蓝云在线平台Web端采用搭建，端采用Vue3 + Ant Design + Tsx
                  框架。 该项目是中笕内部员工使用。
                </p>
                <p>责任描述：</p>
                <p>1. 根据项目需求，快速构造原型图</p>
                <p>2. 参与页面的功能模块设计</p>
                <p>3. 负责前端页面搭建、项目配置、前端UI优化、性能优化</p>
                <p>4. 根据不同的客户开发不同的定制功能</p>
                <p>5. 项目后期维护和更新</p>
              </div>
            </div>
          </div>
          <div class="programe">
            <div class="work_time">4个月<br />恒蓝云微信小程序</div>
            <div class="work_text">
              <div class="triangle-left"></div>
              <div class="exCon">
                <h4>开发时间：2023/7 -- 2023/11</h4>
                <h5>开发工具：Visual Studio Code + 微信开发者工具</h5>
                <p>项目描述：</p>
                <p>
                  该项目是和恒蓝云在线平台Web端配套的微信小程序，为方便用户在手机上更加便捷的管理设备和查看实时数据。
                </p>
                <p>整个网站采用的是Taro + React + Taro UI的框架。</p>
                <p>责任描述：</p>
                <p>1. 根据设计图进行小程序的页面搭建和项目配置。</p>
                <p>2. 根据客户的要求，进行小程序的修改。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="down_arrow">
        <a class="scroll"><span></span></a>
      </div>
    </section>
    <section class="page_five" id="page5">
      <div class="con_wrap">
        <div class="tit_wrap">
          <h1>联系我</h1>
          <div class="scissors">
            <span></span>
          </div>
          <h2>耐得住寂寞，做得成大事。</h2>
        </div>
        <div class="contact_detail">
          <ul class="con_style">
            <li>
              <span></span>
              <p>浙江省杭州市</p>
            </li>
            <li>
              <span></span>
              <p>13093291267@163.com</p>
            </li>
            <li>
              <span></span>
              <p>13093291267</p>
            </li>
          </ul>
          <div class="contact_info">
            <form action="" method="get">
              <label>
                <input
                  type="text"
                  id="username"
                  placeholder="你的名字"
                  required=""
                />
                <p id="check_username"></p>
              </label>
              <label>
                <input
                  type="text"
                  id="usermail"
                  placeholder="你的邮箱"
                  required=""
                />
                <p id="check_usermail"></p>
              </label>
              <label>
                <input
                  type="text"
                  id="usertheme"
                  placeholder="主题"
                  required=""
                  maxlength="25"
                />
                <p id="check_usertheme"></p>
              </label>
              <label>
                <textarea
                  id="usercon"
                  placeholder="内容"
                  required=""
                ></textarea>
                <p id="check_usercon"></p>
              </label>
              <button>发送</button>
            </form>
          </div>
        </div>
      </div>
    </section>
    <div style="text-align: center"></div>
    <style>
      .copyrights {
        text-indent: -9999px;
        height: 0;
        line-height: 0;
        font-size: 0;
        overflow: hidden;
      }
    </style>
    <div class="copyrights" id="links20210126">
      Collect from
      <a href="http://www.cssmoban.com/" title="网站模板">模板之家</a>
      <a href="https://www.chazidian.com/" title="查字典">查字典</a>
    </div>
  </body>
  <script type="text/javascript" src="js/main.js"></script>
</html>
